<!-- uniapp底部菜单 -->
<template>
	<div class="c1">
		<div class="c2" @click="emit('selectImg','iconPath')">
			<img :src="config.qnUrl + element.iconPath" alt="">
		</div>
		<p>未选中</p>
	</div>
	<div class="c1">
		<div class="c2" @click="emit('selectImg','selectedIconPath')">
			<img :src="config.qnUrl + element.selectedIconPath" alt="">
		</div>
		<p>已选中</p>
	</div>
	<div class="flex c3">
		<p>标题：</p>
		<el-input v-model="element.name" clearable/>
	</div>
	<div class="flex c3">
		<p>链接：</p>
		<el-input v-model="element.url" clearable/>
	</div>
</template>

<script setup>
	import publicJS from "@/hook/public.js";
	const {config} = publicJS();
	const emit = defineEmits(["selectImg"]);//自定义事件
	const props = defineProps({
		element: {
			type:Object,
			default:()=>{
				return {}
			}
		}
	})
</script>

<style scoped lang="scss">
	img {
		width: 100%;
		height: 100%;
	}

	.c1 {
		margin-right: 20px;
	}

	.c1 p {
		text-align: center;font-size: 12px;
	}

	.c2 {
		cursor: pointer;
		width: 40px;
		height: 40px;
		border: 1px solid #eee;
		padding: 10%;
	}

	.c2:hover {
		border-color: var(--el-color-primary);
	}

	.c3 {
		flex:1;
		p{width: 60px;}
	}
</style>